<template>
  <div class="times-area">
    <MNav :navs="navs" />
    <el-container>
      <el-main class="main-content">
        <h2 class="title">关于博主</h2>
        <p class="text">
          夕阳，90后，从事前端开发3年多时间，有着理工男的共性。业余时间也喜欢看书，各种各样的书；运动，尤其喜爱跑步，控制节奏的跑步，或者随性的跑步；乐于认识和接触新事物，亲近自然、感悟和享受自然。
        </p>
        <h2 class="title">前端的认识</h2>
        <p class="text">
          前端的发展日新月异，从原始的html页面到目前的三种主流框架，从原来的jquery到现在各种各样的库。随着浏览器升级，脚本语言ECMAScript规范也在不断更新着。chrome内核的开放。前端开发已经不局限于前端了，前端功能越来越强大了。javascript毕竟作为脚本语言，虽然功能很强大，但毕竟只是一门主要用于前端的语言。语言只是一门工具，只是我们用来解决计算机世界问题的一种方法。所有顶级的功法秘籍，都是来源于内功心法。而计算机世界的内功心法就是计算机基础。尤其互联网的基础是计算机网络，前后端的同学基础是对语言、编译器、内存、操作系统、数据结构、设计模式的理解和运用。
        </p>
        <h2 class="title">搭建博客</h2>
        <p class="text">
          搭建博客一直是我早期的想法，直到最近才认识到有些事情不能拖，想做就去做，最后花费了几个月时间终于搭建了自己的博客，前后端都用javascript编码实现的博客，嘿，请那些后端的同学不要再嘲讽前端了。博客主要用来总结学习过程的技术总结，也有我部分的读书、生活接触，若有关于内容的交流，欢迎emial。
        </p>
        <h2 class="title">联系方式</h2>
        <div class="text links">
          <p class="pt5">
            <label>
              <span>邮箱：</span>
            </label>
            <a class="link" href="https://mail.163.com/"
              >xinyang_zhu3@163.com</a
            >
          </p>
          <p class="pt5">
            <label>git:</label>
            <a class="link" href="https://github.com/xinyang3"
              >https://github.com/xinyang3</a
            >
          </p>
          <p class="pt5">
            <label>gitee:</label>
            <a class="link" href="https://gitee.com/xinyang3/blog"
              >https://gitee.com/xinyang3/blog</a
            >
          </p>
        </div>
      </el-main>
      <el-aside class="main-slide">
        <Intro name="关于" :text="text" />
      </el-aside>
    </el-container>
  </div>
</template>
<script>
import Intro from "@/views/components/intro.vue";
import { ref, computed } from "vue";
import MNav from "./components/nav";
import beforeRouteEnter from "@/common/beforeRouteEnter.js";
import texts from "@/common/wonder-texts.js";
const ctext = texts[Math.floor(Math.random() * 13)];
export default {
  name: "about",
  setup() {
    const text = ref(ctext),
      navs = ref([]);
    return {
      text,
      navs,
    };
  },
  components: {
    Intro,
    MNav,
  },
  beforeRouteEnter(to, from, next) {
    beforeRouteEnter(to, from, next);
  },
};
</script>
<style lang="scss" scoped>
.main-slide {
  width: 260px;
}
.main-content {
  background-color: #eeeeee;
  // margin: 20px;
  border-radius: 5px;
}
.main-content .title {
  color: #009688;
  text-align: left;
  font-size: 16px;
}
.main-content .text {
  text-align: left;
  text-indent: 30px;
  margin: 10px 0;
}
.main-content .links {
  font-size: 16px;
}
.main-content .links label {
  width: 60px;
  text-indent: initial;
  display: inline-block;
  text-align: left;
}
.main-content .links .link {
  color: #009688;
  text-decoration: underline;
}
</style>
